import React from 'react';
import { createForm } from 'rc-form';
import './index.css';

class SearchSite extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            aSearch: ''
        }
        this.aScroll = null;
    }

    //监听搜索框change事件
    handleSearch(e){
        this.setState({ aSearch: e.target.value });
    }

    componentWillUnmount(){
        this.setState = (state, callback) => {
            return ;
        }
    }

    render(){
        const { isShow, siteList } = this.props;
        const { aSearch } = this.state;
        return (
            <React.Fragment>
                <div className={isShow ? 'site-mask' : 'site-mask hide'} onClick={() => this.props.closeSite(!this.props.isShow)}></div>
                <div className={isShow ? 'site-wrapper move' : 'site-wrapper unmove'}>
                    <div className='search-wrapper'>
                        <div className='search-input-wrapper'>
                            <div className='img'><img src={require("../../assets/images/home/predict/search-btn.png")} alt="loading" /></div>
                            <input type="text" value={aSearch} name="search" placeholder="搜索站点" onChange={(e) => this.handleSearch(e)} />
                        </div>
                    </div>
                    <div className='site-list'>
                        <div className='site-list-wrapper'>
                            {
                                siteList.length > 0 ? siteList.map((item, index) => {
                                    return (
                                        <div key={index} className='site-item'>
                                            <div className='title'>{item.name}</div>
                                            <div className='site-item-content'>
                                                <ul>
                                                    {
                                                        item.list.length > 0 ? item.list.map((ktem, kndex) => {
                                                            return (
                                                                <li
                                                                    key={kndex} 
                                                                    onClick={() => this.props.selectSite(index, kndex)}>
                                                                <div className={ktem.checked ? 'tag' : 'tag hide'}></div>
                                                                {ktem.name}
                                                                </li>
                                                            )
                                                        }) : ''
                                                    }
                                                </ul>
                                            </div>
                                        </div>
                                    )
                                }) : <div className='null-item'>暂无数据</div>
                            }
                        </div>
                    </div>
                </div>
            </React.Fragment>
        )
    }

}

export default createForm()(SearchSite);
